<template>
  <div class="box">
    <el-form :model="Course" label-width="300px" style="margin: 50px">
      <el-form-item label-width="100px" label="课程ID:">
        <el-input v-model="Course.course_id" style="width: 400px"> </el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="教师ID:">
        <el-input v-model="Course.teacher_id" style="width: 400px"> </el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="课程名称:">
        <el-input v-model="Course.name" style="width: 400px"> </el-input>
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item label="文章图片" label-width="100px">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=course"
          :headers="headers"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="Course.cover_picture"
            :src="Course.cover_picture"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能修改图片为jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <!-- ------------------------------ -->

      <el-form-item label-width="100px" label="课程类型:">
        <el-select v-model="Course.type" placeholder="请选择文章类型">
          <el-option label="运动养生" value="运动养生"></el-option>
          <el-option label="膳食均衡" value="膳食均衡"></el-option>
          <el-option label="心理健康" value="心理健康"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
        <el-button
          type="success"
          @click="addType"
          icon="el-icon-plus"
        ></el-button>
      </el-form-item>

      <el-form-item label-width="100px" label="课程标签:">
        <!-- <el-input v-model="Course.label" style="width: 400px" /> -->
        {{ Course.label }}
        <el-checkbox-group v-model="Course.label">
          <el-checkbox label="太极">太极</el-checkbox>
          <el-checkbox label="健康">健康</el-checkbox>
          <el-checkbox label="运动">运动</el-checkbox>
          <el-checkbox label="养生">养生</el-checkbox>
          <el-checkbox label="手凉">手凉</el-checkbox>
          <el-checkbox label="脚凉">脚凉</el-checkbox>
          <el-checkbox label="膝部">膝部</el-checkbox>
          <el-checkbox label="八段锦">八段锦</el-checkbox>
          <el-checkbox label="养生操">养生操</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label-width="100px" label="价格:">
        <el-input v-model="Course.price" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="总量:">
        <el-input v-model="Course.total_part" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="公司简介:">
        <el-input v-model="Course.brief_introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="课程介绍:">
        <el-input v-model="Course.introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="开始时间:">
        <el-date-picker
          disabled
          v-model="Course.start_time"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label-width="100px" label="学习人数:">
        <el-input v-model="Course.study_number" style="width: 400px" />
      </el-form-item>

      <el-form-item style="margin-left: -20px">
        <el-button type="primary" @click="onSubmit">编辑</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="Course">
        <el-form-item label="课程类型" label-width="100px">
          <el-input autocomplete="off" v-model="Course.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >添 加</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import updateCourse from "@/api/healthycourse";
export default {
  // name:'Course',
  data() {
    return {
      dialogFormVisible: false, //对话框（查看）
      Course: {
        type: "",
        cover_picture: "",
        label: [],
        // coursePartList: [
        //   {
        //     course_id: 0,
        //     part_number: 1,
        //     part_name: "string",
        //     brief: "string",
        //     content: "string",
        //     status: 0,
        //   },
        // ],
      },
      checkList: [],
      headers: {
        Authorization: getToken(),
      },
    };
  },
  created() {
    this.fatchDataId();
  },
  methods: {
    fatchDataId() {
      var id = this.$route.params.course_id;
      console.log("2135464213", id);
      var vm = this;
      updateCourse.updatecourse(id).then(function (resp) {
        resp.data.course.label = resp.data.course.label.split(" ");
        vm.Course = resp.data.course;
      });
    },
    onSubmit() {
      var vm = this;
      vm.Course.label = this.Course.label.join(' ');
      updateCourse
        .upcourse(vm.Course)
        .then(function (resp) {
          vm.$message({
            message: "修改成功!",
            type: "success",
          });
          vm.$router.go(-1);
        })
        .catch(function (error) {
          vm.$message.error("修改失败");
        });
    },
    addType() {
      console.log("aaaaaaa");
      this.dialogFormVisible = true;
    },
    //上传图片相关回调
    handleAvatarSuccess(res, file) {
      this.Course.cover_picture = res.data.picUrl;
      console.log("上传图片成功", res);
      console.log("this.Course.cover_picture", this.Course.cover_picture);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("beforeAvatarUpload", file);
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // -------------------------------------------------
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
.box {
  margin-left: 200px;
  height: 1100px;
  width: 700px;
  border: solid rgb(187, 186, 187);
}

.avatar-uploader .el-upload {
  border: 3px dashed #decfcf;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

